<template>
	<view :style="'background: url(' + imgData.wishBg + ') no-repeat;background-size: contain;height:' +
		systemInfo.screenHeight + 'px;'">
		<u-navbar title="意向详情" :titleStyle="{'color':'#fff'}" leftIconColor="#fff" :autoBack="true"
			bgColor="transparent" :fixed="false">
		</u-navbar>
		<view class="p-30">
			<view class="card p-30">
				<view class="size flex-row align-center">
					<view class="">
						{{info.price}}
					</view>
					<view class="ml-30">
						{{info.type}}
					</view>
				</view>
				<view class="mt-30">
					<view class="flex-row small-size mt-10">
						<view class="label">
							服务要求
						</view>
						<view class="">
							{{info.yaoqiu}}
						</view>
					</view>
					<view class="flex-row small-size mt-10">
						<view class="label">
							服务项目
						</view>
						<view class="">
							{{info.service}}
						</view>
					</view>
					<view class="flex-row small-size mt-10">
						<view class="label">
							时间
						</view>
						<view class="">
							{{$u.timeFormat(info.starttime, 'yyyy-mm-dd hh')}}
							-
							{{$u.timeFormat(info.endtime, 'yyyy-mm-dd hh')}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content p-30">
			<view class="flex-row align-center">
				<image :src="user" style="width: 40rpx;height: 40rpx;" mode="widthFix"></image>
				<view class="title ml-10">
					报名人员
				</view>
			</view>
			<view class="mt-30">
				<template v-if="staff">
					<navigator :url="`/pages/settle/detail?id=${staff.id}`" class="item flex-row align-center justify-between">
						<view class="flex-row align-center">
							<view class="">
								<u-avatar :src="staff.avatar" size="38"></u-avatar>
							</view>
							<view class="ml-10">
								<view class="">
									{{staff.name}}
								</view>
								<view class="small-size flex-row align-center">
									<view class="">
										{{staff.age}}岁
									</view>
									<view class="ml-30">
										{{staff.height}}cm
									</view>
									<view class="ml-30">
										{{staff.weight}}kg
									</view>
								</view>
							</view>
						</view>
					</navigator>
				</template>
				<template v-else>
					<navigator :url="`/pages/settle/detail?id=${item.id}`" class="item flex-row align-center justify-between" :class="{'mt-30' : index != 0}"
						v-for="(item,index) in staff_data">
						<view class="flex-row align-center">
							<view class="">
								<u-avatar :src="item.staff.avatar" size="38"></u-avatar>
							</view>
							<view class="ml-10">
								<view class="">
									{{item.staff.name}}
								</view>
								<view class="small-size flex-row align-center">
									<view class="">
										{{item.staff.age}}岁
									</view>
									<view class="ml-30">
										{{item.staff.height}}cm
									</view>
									<view class="ml-30">
										{{item.staff.weight}}kg
									</view>
								</view>
							</view>
						</view>
						<view class="" @click="select1(index)">
							<u-icon :color="item.checked ? $u.color.color : ''"
								:name="!item.checked ? 'checkmark-circle' : 'checkmark-circle-fill'"></u-icon>
						</view>
					</navigator>
				</template>
			</view>
		</view>
		<view class="submit">
			<!-- <u-button @click="select" :loading="loading" :color="$u.color.color" shape="circle">确认选择</u-button> -->
			<template v-if="info.state == 0">
				<u-button :loading="loading" :color="$u.color.color" shape="circle">申请中</u-button>
			</template>
			<template v-else-if="info.state == 2">
				<u-button :loading="loading" shape="circle">已拒绝</u-button>
			</template>
			<template v-else-if="info.state == -1">
				<u-button :color="$u.color.color" :loading="loading" shape="circle">已结束</u-button>
			</template>
			<template v-else>
				<template v-if="staff">
					<u-button :loading="loading" :color="$u.color.color" shape="circle">匹配中</u-button>
				</template>
				<template v-else>
					<template v-if="$userInfo.is_staff == 1">
						<u-button @click="apply" :loading="loading" :color="$u.color.color" shape="circle">确认意向</u-button>
					</template>
					<template v-else-if="$userInfo.id == info.user_id">
						<u-button @click="select" :loading="loading" :color="$u.color.color" shape="circle">确认选择</u-button>
					</template>
				</template>
			</template>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		intentionDetail,
		intentionApply,
		intentionAgree
	} from '@/common/api.js'
	import {
		mapState
	} from "vuex";
	import commonMixin from '@/mixins/common.js';
	import img from '@/mixins/img.js';
	export default {
		mixins: [commonMixin, img],
		data() {
			return {
				loading: false,
				id: 0,

				info: {},
				staff_data: [],
				staff: null
			}
		},
		onLoad(e) {
			if (e.id) this.id = e.id
			this.initData()
		},
		methods: {
			initData() {
				intentionDetail({
					data: {
						id: this.id
					}
				}).then(res => {
					console.log('res', res);
					this.info = res.info;
					this.staff = res.staff
					this.staff_data = res.staff_data.map(v => {
						v.checked = false;
						return v;
					})
				})
			},
			select1(index) {
				this.staff_data = this.staff_data.map(v => {
					v.checked = false;
					return v;
				})
				this.staff_data[index].checked = !this.staff_data[index].checked
			},
			select() {
				let vm = this;
				let staff = this.staff_data.filter(v => v.checked);
				if (staff.length == 0) {
					vm.$refs.uToast.show({
						type: 'error',
						message: '请选择技师',
						complete() {
							vm.loading = false;
						}
					})
					return false;
				}
				vm.loading = true;
				intentionAgree({
					data: {
						staff_id: staff[0]['staff_id'],
						id: this.id
					}
				}).then(res => {
					console.log('res', res);
					vm.$refs.uToast.show({
						type: 'success',
						message: '确认成功',
						complete() {
							vm.loading = false;
							vm.initData();
						}
					})
				}).catch(err => {
					vm.loading = false
				})
			},
			apply() {
				let vm = this;
				vm.loading = true;
				intentionApply({
					data: {
						id: this.id
					}
				}).then(res => {
					console.log('res', res);
					vm.$refs.uToast.show({
						type: 'success',
						message: '报名成功',
						complete() {
							vm.loading = false;
							vm.initData();
						}
					})
				}).catch(err => {
					vm.loading = false
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.label {
		width: 120rpx;
	}

	.content {
		// background-image: linear-gradient(#FFEAE9,#FFEAE9,#FFFFFF);
		background: #fff;
		border-top-right-radius: 30rpx;
		border-top-left-radius: 30rpx;
		min-height: 1000rpx;
		padding-bottom: 120rpx;
	}

	.item {
		background-color: #F5F6F7;
		border-radius: $radius;
		padding: 30rpx;
	}

	.submit {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		padding: 30rpx;
		box-sizing: border-box;
	}
</style>